<template>
  <view class="bigbox">
    <view class="search">
      <navSearch />
    </view>
    <uni-segmented-control
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      style-type="text"
      active-color="#fd2d48"
    ></uni-segmented-control>
    <view class="content">
      <!-- <view v-if="current === 0"> -->
      <swiper :current="current" @change="changeCurrentIndex">
        <swiper-item>
          <scroll-view scroll-y @scrolltolower="onbottom">
            <navigator
              :url="'/pages/detail/index?id='+item.goods_id"
              :data-index="index"
              class="item"
              v-for="(item,index) in dataList"
              :key="item.goods_id"
            >
              <view class="left">
                <image
                  :src="item.goods_small_logo || 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597077386123&di=8ad1b4f2cd0b1f82f5bc5e89ce6b3990&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F08%2F20161108215434_ZAQe4.gif'"
                  mode="widthFix"
                />
              </view>
              <view class="right">
                <view class="title">{{item.goods_name}}</view>
                <view class="price">￥{{item.goods_price.toFixed(2)}}</view>
              </view>
            </navigator>
          </scroll-view>
        </swiper-item>
        <swiper-item>销量</swiper-item>
        <swiper-item>价格</swiper-item>
      </swiper>
      <!-- </view> -->
      <!-- <view v-if="current === 1">销量</view>
      <view v-if="current === 2">价格</view>-->
    </view>
  </view>
</template>   
<script>
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
  components: { uniSegmentedControl },
  async onLoad(options) {
    this.params.cid = options.id || 5
    await this.getDataList()
  },
  data() {
    return {
      items: ['综合', '销量', '价格'],
      current: 0,
      params: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10,
      },
      dataList: [],
    }
  },
  // 下拉刷新
  async onPullDownRefresh() {
    console.log(1111)
    this.params.pagenum = 1
    await this.getDataList(true)
    uni.showToast({
      title: '刷新成功',
      duration: 2000,
      icon: 'none',
    })
    // 关闭下拉刷新
    uni.stopPullDownRefresh()
  },

  // 上拉加载
  async onReachBottom() {
    this.params.pagenum += 1
    console.log(this.params.pagenum)
    console.log(this.pageTotal)
    if (this.params.pagenum > this.pageTotal) {
      uni.showToast({
        title: '没有更多数据了',
      })
    } else {
      uni.showLoading({
        title: '加载中',
      })
      await this.getDataList()
      uni.hideLoading()
    }
  },
  methods: {
    // tab栏点击
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },
    getDataList(flag = false) {
      return this.request({
        url: '/goods/search',
        data: this.params,
      }).then((res) => {
        if (flag) {
          this.dataList = res.goods
        } else {
          console.log(res)
          this.dataList = [...this.dataList, ...res.goods]
        }
        // 获取总页数
        this.pageTotal = Math.ceil(res.total / this.params.pagesize)
      })
    },
    changeCurrentIndex(e) {
      console.log(e.detail.current)
      this.current = e.detail.current
      console.log(this.current)
      // this.current
    },
    async onbottom() {
      this.params.pagenum += 1
      if (this.params.pagenum > this.pageTotal) {
        uni.showToast({
          title: '没有更多数据了',
        })
      } else {
        uni.showLoading({
          title: '加载中',
        })
        await this.getDataList()
        uni.hideLoading()
      }
    },
  },
}
</script>
<style lang="scss">
.bigbox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.search {
  width: 100%;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh-162rpx);
  // height:100vh;
  .item {
    // background: orange;
    display: flex;
    padding: 20rpx;
    border-bottom: 1px solid #ddd;
    .left {
      flex: 1;
      margin-right: 20rpx;
    }
    .right {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        color: $theme-color;
      }
    }
  }
}
swiper {
  height: 100%;
  swiper-item {
    height: 100%;
    scroll-view {
      height: 100%;
    }
  }
}
</style>